<template>
  <div class="products-area" v-loading="loading">
    <div class="h-102px">
      <el-scrollbar>
        <div class="cates">
          <div v-for="item in cates" :key="item.name" class="cate button" :class="{ active: item.checked }" @click="chooseCate(item)">
            {{ item.name }}
          </div>
        </div>
      </el-scrollbar>
    </div>

    <div style="height: 5px"></div>
    <div class="main">
      <el-scrollbar>
        <div class="products">
          <div class="product button" v-for="item in shows" :key="item.id" :class="{ active: item.checked }" @click="chooseProduct(item)">
            <p>{{ item.nameZh }}</p>
            <p class="font-size-12px">{{ item.nameRu }}</p>
            <span>{{ item.normalPrice }}{{ $t('home.order.start') }}</span>
          </div>
        </div>
      </el-scrollbar>
    </div>
    <div style="height: 5px"></div>
    <div class="setting">
      <section class="m-b-10px">
        <div class="title">{{ $t('home.order.size') }}</div>
        <div class="data">
          <div
            class="button"
            v-for="item in sp.size"
            :key="item.name"
            :class="{ active: order?.size == item.name }"
            @click="changeOpt(item, 0)"
          >
            {{ item.name }} - {{ item.price }}
          </div>
        </div>
      </section>
      <section class="m-b-10px">
        <div class="title">{{ $t('home.order.cold') }}</div>
        <div class="data">
          <div class="button" v-for="item in sp.cold" :key="item" :class="{ active: order?.cold == item }" @click="changeOpt(item, 1)">
            {{ showCold(item) }}
          </div>
        </div>
      </section>
      <section>
        <div class="title">{{ $t('home.order.sugar') }}</div>
        <div class="data">
          <div class="button" v-for="item in sp.sugar" :key="item" :class="{ active: order?.sugar == item }" @click="changeOpt(item, 2)">
            {{ showSugar(item) }}
          </div>
        </div>
      </section>
    </div>
    <div style="height: 5px"></div>
    <div>
      <el-scrollbar>
        <div class="orders" v-loading="queueLoading">
          <div v-for="d in queue" @click="done(d)">
            {{ d.delivery }}
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { ElMessageBox } from 'element-plus'

interface ApiCategoryVO extends ApiCategory {
  checked?: boolean
  name?: string
}

interface ApiProductVO extends ApiProduct {
  checked?: boolean
}

const { t } = useI18n()

const ostore = useOrderStore()

const loading = ref(false)
const queueLoading = ref(false)

const cates = ref<ApiCategoryVO[]>()
let products = [] as ApiProductVO[]
const shows = ref<ApiProductVO[]>()

const queue = ref<ApiOrderDeliveryVO[]>([])

const currId = ref()

// selectProduct
const sp = ref<ApiProduct>({} as ApiProduct)

const order = computed(() => ostore.orders.find(o => o.id == currId.value))

onMounted(() => {
  initProduct()
  initQueue()
})

const initProduct = () => {
  loading.value = true
  Promise.all([apis.api.userShopCategoryAll(), apis.api.userShopProductAll()]).then(([c, p]) => {
    cates.value = c
    const all = {
      id: 0,
      tenantId: 'TEAWOO',
      name: t('home.order.all'),
      nameZh: t('home.order.all'),
      nameRu: t('home.order.all'),
      createTime: ''
    }
    cates.value.unshift(all)
    products = p.map(a => {
      a.cate = c.find(x => x.id === a.categoryId)
      return a
    })
    chooseCate(all)
    loading.value = false
  })
}

function chooseCate(cate: ApiCategoryVO) {
  cates.value?.forEach(c => (c.checked = false))
  cate.checked = true
  shows.value = cate.id > 0 ? products.filter(p => p.categoryId == cate.id) : products
}

function chooseProduct(p: ApiProductVO) {
  shows.value?.forEach(c => (c.checked = false))
  p.checked = true
  sp.value = p
  const id = new Date().getTime()

  ostore.addOrder({
    id: id,
    productId: p.id,
    productImg: p.icon,
    productNameZh: p.nameZh,
    productNameRu: p.nameRu,
    cateId: p.cate.id,
    cateName: p.cate.name,
    cateDrink: p.cate.drink,
    cateSticker: p.cate.sticker,
    amount: 1,
    size: p.size[0].name,
    price: p.size[0].price,
    cold: p.cold[0],
    sugar: (p.sugar || []).find(x => x == 100) || p.sugar[0]
  })
  currId.value = id
}

const changeOpt = (item: any, type: number) => {
  ostore.changeOpt(currId.value, type, item)
}

function initQueue() {
  apis.api
    .employeeShopQueue({ type: 1 })
    .then(d => {
      queue.value = d.waitList
    })
    .finally(() => {
      if (queue.value.length < 1) {
        setTimeout(() => {
          initQueue()
        }, 10000)
      }
    })
}

function done(o: ApiOrderDeliveryVO) {
  ElMessageBox.confirm(t('home.order.done'), t('common.tip'), {
    confirmButtonText: t('common.sure'),
    cancelButtonText: t('common.cancel'),
    type: 'info',
    buttonSize: 'large'
  })
    .then(() => {
      apis.api.employeeOrderDone({ orderNum: o.orderNum }, queueLoading).finally(() => initQueue())
    })
    .catch(() => {})
}

watch(
  () => ostore.currOrderId,
  (n, o) => {
    if (n != currId.value) {
      // 切换了商品
      currId.value = n
      if (n) {
        const order = ostore.orders.find(o => o.id == currId.value)
        sp.value = products.find(p => p.id == order?.productId)!
      }
    }
  }
)
</script>

<style lang="scss" scoped>
.products-area {
  height: calc(100vh - 50px);
  .active {
    background: #3aa1a2 !important;
    color: #fff;
  }
}
.products {
  display: flex;
  flex-wrap: wrap;
  .product {
    width: 130px;
    border-radius: 4px 4px 4px 4px;
    margin: 0 6px 6px 0;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    p {
      margin: 0;
    }
    span {
      margin-top: 2px;
      color: #d50000;
    }
  }
}
.cates {
  height: 102px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  .cate {
    flex-shrink: 0;
    margin-right: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 106px;
    height: 50px;
    text-align: center;
    margin: 0 1px 1px 0;
    border-radius: 4px;
  }
}
.main {
  height: calc(100vh - 440px);
}
.setting {
  background-color: #ffffff;
  height: 230px;
  background: #ffffff;
  box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.04);
  border-radius: 6px 6px 6px 6px;
  box-sizing: border-box;
  padding: 10px;
  color: #666666;
  .title {
    font-size: 16px;
    margin-bottom: 4px;
  }
  .data {
    display: flex;
    div {
      border-radius: 4px 4px 4px 4px;
      margin-right: 8px;
      padding: 8px 11px;
      text-align: center;
      min-width: 32px;
      background-color: #f5f5f5;
    }
  }
}

.button {
  cursor: pointer;
  background-color: #fff;
  &:active {
    background-color: #dcdcdc;
  }
}

.orders {
  display: flex;
  div {
    background-color: #fff;
    cursor: pointer;
    margin-right: 5px;
    padding: 8px 16px;
  }
}
</style>
